<template>
  <div class="nav" v-if="nnn">
    <div class="nav_con">
      <div class="left">
        <slot name="left">
          <div v-if="logo">ele.me</div>
          <i class="iconfont icon-fanhui1" v-if="back" @click="backAct"></i>
          <i class="iconfont icon-soushuo" v-if="seach" @click="seachBtn"></i>
        </slot>
      </div>
      <div class="middle">
        <slot name="middle">
          <div v-if="cityName">{{ this.$store.state.nowCityName }}</div>
          <div class="title">{{title}}</div>
        </slot>
      </div>
      <div class="right">
        <slot name="right">
          <div v-if="login" @click="LoginWork">登录|注册</div>
          <div v-if="city" @click="changeCity" class="sss">切换城市</div>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Navgation",
  computed: {
    logo: function () {
      return this.$store.state.logo;
    },
    login: function () {
      return this.$store.state.login;
    },
    back: function () {
      return this.$store.state.back;
    },
    seach: function () {
      return this.$store.state.seach;
    },
    title: function () {
      console.log('++++++++++++++++++++++++++++++++++++');-
      console.log(this.$store);
      return this.$store.state.title;
    },
    nnn:function(){
      return this.$store.state.nnn;
    }
  },
  methods: {
    backAct() {
      this.$router.go(-1);
    },
    LoginWork() {
      this.$router.push({ name: "LoginWork" });
    },
  },
};
</script>
<style lang="less">
.nav {
  height: 64px;
  .nav_con {
    height: 64px;
    padding: 0 10px;
    background-color: #3190e8;
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

  }
  .left {
    i {
      font-size: 20px;
    }
    .icon-fanhui1 {
      font-size: 16px;
    }
  }
  .middle {
    width: 50%;
    // font-size: 18px;
    font-weight: 600;
    max-width: 110px; 
   .title{
      text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
   }

  }
  .right {
    i {
      font-size: 20px;
    }
    .sss {
      font-size: 12px;
    }
  }
}
</style>